<template>
	<view>
		<cu-custom bgColor="bg-top" isBack>
			<block slot="content">站点地图</block>
		</cu-custom>
	    <view class="page-body">
	        <view class="page-section page-section-gap">
	            <map style="width: 100%; height: 1400rpx;" 
					:latitude="latitude" 
					:longitude="longitude" 
					:markers="marker"  
					:scale="scale"
					:include-points="includePoints"
					@markertap="openWin"
					@callouttap="openWin"
				>
	            </map>
	        </view>
	    </view>
		
		
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="m-shopcar-box">
					<view class="m-header">
						<view class="m-line">
							<view class="">
								站点：
							</view>
							<view class="m-light">
								{{siteName}}
							</view>
						</view>
						<view class="m-clear-car" @tap="clearCar">
							
						</view>
					</view>
					<view v-for="(item,index) in siteData" :key="index" class="m-shopcar-item">
						<view v-if="item!==''">
							<view class="m-title">
								{{item.title}}:{{item.name}}
							</view>
							<view class="m-price">
								
							</view>
							<view class="m-controne">
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Util from '@/utils/util.js'
	export default {
		components: {
		},
		data() {
			return {
				specClass: '',//规格弹窗css类，控制开关动画
				title: 'map',
				latitude: 22.5460535462,//维度
				longitude: 114.025973657,//经度
				marker: [],
				scale:14,//地图缩放程度
				includePoints:[],
				siteName:'',
				siteData:[{title:'1',name:'1'},{
					title:'2',name:'2'
				},{title:'3',name:'3'}],
				siteDatas:[]
			};
		},
		onLoad() {
			
			this.addMarkes()
		},
		methods: {
			openWin(e) {//点击标注或者信息框
				let markerId = e.detail.markerId
				//#ifdef MP-WEIXIN
				markerId = e.markerId
				//#endif
				//#ifdef H5
				markerId = e.detail.markerId
				//#endif
				for(let i=0; i<this.siteDatas.length;i++){
				    if(parseInt(this.siteDatas[i].id) === markerId){
						//设置窗口内容
						this.siteName = this.siteDatas[i].siteName
						this.siteData= this.siteDatas[i].datas
						break
					}
				}
				
				this.showSpec(false)
			},
			//添加地图标注
			addMarkes(){
				let userInfo = Util.getUserInfo();
				//加载站点
				Util.request('/monitor/groupSite/sites/user', {userId:userInfo.userId}, 'GET').then((res) => {
					this.marker = []
					this.includePoints = []
					this.siteData=[]
					this.siteDatas=[]
					res.data.map(item => {
						let marke = {
							id:parseInt(item.siteId),
							latitude: item.lat,//纬度
							longitude: item.lng,//经度
							iconPath: '../../../static/images/home.png',    //显示的图标        
							rotate:0,   // 旋转度数
							width:50,   //宽
							height:50,   //高
							// title:'',//标注点名
							alpha:0.5,   //透明度
							// label:{//为标记点旁边增加标签   //因背景颜色H5不支持
							//   　content:'唐山迁安',//文本
							// 　　color:'red',//文本颜色
							    // 　　fontSize:24,//文字大小
							    //    x:5,//label的坐标，原点是 marker 对应的经纬度
							    //    y:1,//label的坐标，原点是 marker 对应的经纬度 
							    //    borderWidth:12,//边框宽度
							    //    borderColor:'pink',//边框颜色    
							    // 　　borderRadius:20,//边框圆角                        
							    // 　　bgColor:'black',//背景色
							    // 　　padding:5,//文本边缘留白
							    //    textAlign:'right'//文本对齐方式。
							// },
							callout:{//自定义标记点上方的气泡窗口 点击有效  
							    content:item.siteName,//文本
							    color:'#ffffff',//文字颜色
							    fontSize:14,//文本大小
							    borderRadius:2,//边框圆角
							  　bgColor:'#00c16f',//背景颜色
							    display:'ALWAYS',//常显
							},
							// anchor:{//经纬度在标注图标的锚点，默认底边中点
							//     x:0,    原点为给出的经纬度
							//     y:0,
							// }
						}
						this.marker.push(marke)
						this.includePoints.push(marke)
						
						let pollRtdDatas = []
						if(item.SiteLastData){
						    let pollRtds=JSON.parse(item.SiteLastData)
						
						    for(let i=0; i<pollRtds.length;i++){
						              //设置窗口内容
								pollRtdDatas.push({title:pollRtds[i].pollName,name:pollRtds[i].Rtd})
							}
						}
						let dataInfo = {
							id:item.siteId,
							siteName:item.siteName,
							datas:pollRtdDatas
						}
						this.siteDatas.push(dataInfo)
					})
				})
			},
			discard(){
				
			},
			//规格弹窗
			showSpec(fun) {
				this.specClass = 'show';
				this.specCallback = fun;
			},
			// popup start
			//关闭规格弹窗
			hideSpec() {
				this.specClass = 'hide';
				//回调
				this.selectSpec&&this.specCallback&&this.specCallback();
				this.specCallback = false;
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
		}
	};
</script>

<style lang="scss">
	
	@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(-100%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(-100%);
			}
			100% {
				transform: translateY(0);
			}
		}
	.m-store-banner{
		min-height: 270upx;
		position: relative;
		padding-top: 20upx;
		background:#eee;
		// background:url("../../static/img/storebanner.png");
		background-size: 100% 200upx;
		background-repeat: no-repeat;
		.m-content{
			width: 690upx;
			position: relative;
			bottom: 10upx;
			left: 30upx;
			right: 30upx;
			margin-top: 30upx;
			background:#fff;
			border-radius: 15upx;
			box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
			z-index: 100;
			.m-message{
				padding:20upx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-end;
				.m-img{
					flex:0 0 135upx;
					height: 135upx;
					// background:url("../../static/img/storebanner.png");
				}
				.m-body{
					flex: 1;
					// padding: 20upx;
					padding-left: 10upx;
					padding-bottom: 0;
					.m-title{
						font-size: 32upx;
						color:#333333
					}
					.m-text{
						font-size: 20upx;
						color:#999999;
						line-height: 38upx;
						margin-top: 10upx;
					}
					.m-time{
						font-size: 20upx;
						color:#999999;
						margin-top: 10upx;
					}
				}
				.m-phone{
					flex:0 0 40upx;
					text-align: right
				}
			}
		}
	}
	.popup {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 300;
		display: none;
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}
		.layer {
			position: fixed;
			z-index: 22;
			bottom: -70%;
			width: 100%;
			padding: 0;
			height: 70%;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			// 购物车
			.m-shopcar-box {
				width: 100%;
				// padding: 30upx 0;
				.m-header{
					padding: 30upx 30upx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.m-line{
						display: flex;
						color:#333333;
						font-size: 30upx;
						.m-light{
							color:#333333;
							font-size: 22upx;
							padding-left: 10upx;
						}
					}
					.m-clear-car{
						color:#333333;
						font-size:22upx;
					}
				}
				.m-shopcar-item{
					margin-left: 30upx;
					margin-right: 30upx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items:center;
					border-top: 1px solid #eee;
					padding: 20upx;
					&:last-of-type{
						border-bottom: 1px solid #eee;
					}
					.m-title{
						color:#4c4c4c;
						font-size: 26upx;
					}
					.m-price{
						color:#ff582b;
						font-size: 26upx;
					}
					.m-controne{
						// flex: 
					}
				}
			}
			.btn {
				width: 100%;
				height: 100upx;
				.button {
					width: 100%;
					height: 80upx;
					border-radius: 40upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #f47952;
					font-size: 28upx;
				}
			}
		}
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			display: block;
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		&.service {
			.row {
				margin: 30upx 0;
				.title {
					font-size: 30upx;
					margin: 10upx 0;
				}
				.description {
					font-size: 28upx;
					color: #999;
				}
			}
		}
		&.spec {
			.title {
				font-size: 30upx;
				margin: 30upx 0;
			}
			.sp {
				display: flex;
				view {
					font-size: 28upx;
					padding: 5upx 20upx;
					border-radius: 8upx;
					margin: 0 30upx 20upx 0;
					background-color: #f6f6f6;
					&.on {
						padding: 3upx 18upx;
						border: solid 1upx #f47925;
					}
				}
			}
			.length{
				margin-top: 30upx;
				border-top: solid 1upx #aaa;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20upx;
				.text{
					font-size: 30upx;
				}
				.number{
					display: flex;
					justify-content: center;
					align-items: center;
					.input{
						width: 80upx;
						height: 60upx;
						margin: 0 10upx;
						background-color: #f3f3f3;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						input{
							width: 80upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							font-size: 26upx;
						}
					}
					
					.sub ,.add{
						width: 60upx;
						height: 60upx;
						background-color: #f3f3f3;
						border-radius: 5upx;
						.icon{
							font-size: 30upx;
							width: 60upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
							
						}
					}
				}
			}
			
		}
	}
	// 商品列表样式
	.category-list{
		width: 100%;
		background-color: #fff;
		display: flex;
		padding-bottom: 99upx;
		
		.left,.right{
			background: #fff;
			position: absolute;
			top: 289upx;
			/*  #ifdef  APP-PLUS  */
			top: calc(100upx + var(--status-bar-height));
			/*  #endif  */
			bottom: 0upx;
		}
		.left{
			width: 24%;
			left: 0upx;
			background-color: #f6f3f3;
			
			.row{
				width: 100%;
				height: 90upx;
				display: flex;
				align-items: center;
				.text{
					width: 100%;
					position: relative;
					font-size: 28upx;
					display: flex;
					justify-content: center;
					color:#999999;
					.block{
						position: absolute;
						width: 0upx;
						left: 0;
					}
				}
				&.on{
					height: 100upx;
					background-color: #fff;
					.text{
						font-size: 30upx;
						// font-weight: 600;
						// color: #2d2d2d;
						.block{
							width: 10upx;
							height: 80%;
							top: 10%;
							// background-color: #f06c7a;
						}
					}
				}
			}
		}
		.right{
		   width: 76%;
			left: 24%;
			.category{
// 				width: 94%;
				padding: 20upx 30upx;
			
				.list{
					margin-top: 40upx;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					.box{
						width: 100%;
					}
				}
			}
		}
	}
	/*抛物线小球*/
	.good_box{
	  width: 10px;
	  height: 10px;
	  position: fixed;
	  border-radius: 50%;
	  overflow: hidden;
	  left: 50%;
	  top: 50%;
	  z-index: +99;
	  background:#ff582b;
	}
</style>

